import { useState, useEffect } from 'react';
import { List, Tag, Tabs, Spin, Empty, Card, message } from 'antd';
import { InboxOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import api from '../utils/api';

export default function Wines() {
  const [loading, setLoading] = useState(true);
  const [wines, setWines] = useState([]);
  const [activeTab, setActiveTab] = useState('all');
  const user = JSON.parse(localStorage.getItem('user') || '{}');

  useEffect(() => {
    fetchWines();
  }, [activeTab]);

  const fetchWines = async () => {
    setLoading(true);
    try {
      const params = activeTab === 'all' ? {} : { status: activeTab };
      const res = await api.get(`/wines/user/${user.id}`, { params });
      if (res.success) {
        setWines(res.data);
      }
    } catch (error) {
      message.error('加载失败');
    } finally {
      setLoading(false);
    }
  };

  const statusMap = {
    stored: { text: '寄存中', color: 'processing' },
    taken: { text: '已取出', color: 'default' }
  };

  const items = [
    { key: 'all', label: '全部' },
    { key: 'stored', label: '寄存中' },
    { key: 'taken', label: '已取出' }
  ];

  return (
    <div style={{ padding: '20px 0' }}>
      <h2 style={{
        color: '#d4af37',
        fontSize: 24,
        fontWeight: 600,
        padding: '0 20px 16px',
        margin: 0
      }}>
        我的寄存酒
      </h2>

      <Tabs
        activeKey={activeTab}
        onChange={setActiveTab}
        items={items}
        style={{ padding: '0 20px' }}
      />

      {loading ? (
        <div style={{ textAlign: 'center', padding: '50px 0' }}>
          <Spin size="large" />
        </div>
      ) : wines.length === 0 ? (
        <Empty description="暂无寄存酒" style={{ padding: '50px 0' }} />
      ) : (
        <List
          grid={{ gutter: 16, column: 1 }}
          dataSource={wines}
          renderItem={(item) => (
            <List.Item style={{ padding: '0 20px 8px' }}>
              <Card
                style={{
                  background: 'rgba(0, 0, 0, 0.5)',
                  backdropFilter: 'blur(10px)',
                  border: '1px solid rgba(212, 175, 55, 0.2)',
                  borderRadius: 12
                }}
                bodyStyle={{ padding: 16 }}
              >
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: 12 }}>
                  <InboxOutlined style={{ fontSize: 32, color: '#d4af37', marginRight: 16 }} />
                  <div style={{ flex: 1 }}>
                    <div style={{ color: '#fff', fontSize: 18, fontWeight: 600, marginBottom: 4 }}>
                      {item.wineName}
                    </div>
                    <Tag color={statusMap[item.status]?.color || 'default'}>
                      {statusMap[item.status]?.text || item.status}
                    </Tag>
                  </div>
                </div>

                <div style={{ color: 'rgba(255, 255, 255, 0.7)', fontSize: 14, lineHeight: '24px' }}>
                  <div>类型: {item.wineType}</div>
                  <div>数量: {item.quantity} {item.unit || '瓶'}</div>
                  <div>寄存时间: {dayjs(item.storageDate || item.createdAt).format('YYYY-MM-DD')}</div>
                  {item.status === 'taken' && item.updatedAt && (
                    <div>取出时间: {dayjs(item.updatedAt).format('YYYY-MM-DD')}</div>
                  )}
                  {item.notes && (
                    <div style={{ marginTop: 8, padding: '8px 12px', background: 'rgba(212, 175, 55, 0.1)', borderRadius: 4 }}>
                      备注: {item.notes}
                    </div>
                  )}
                </div>
              </Card>
            </List.Item>
          )}
        />
      )}
    </div>
  );
}
